import React from 'react'
import './stationList.scss'
import pull from '../../static/pull.png'
import place from '../../static/place.png'
import StationItem from './stationItem'
import push from '../../static/push.png'
import place2 from '../../static/place2.png'
import Map from '../map/map'
import { productInfoList,selectListByProductInfoId } from '../../utils/interface'
import {getUrlParam} from '../../utils/tools'
import {divide} from "../../utils/maths"
import Loading from '../../comm/loading'

function Seb2(props) {
    if (props.tabState == 1) {
        return (
            <div className="searchBox">
                <div className="center">
                    {props.oilList.map((item, idx) => {
                        return (<p key={idx} className={props.act_index == idx ? 'active' : ''} onClick={props.selectOil.bind(this, idx)}>{item.name}</p>)
                    })}
                </div>
            </div>)
    } else if (props.tabState == 2) {
        return (
            <div className="searchBox">
                <div className="center">
                    <p className={props.distanceSort==1?'active':''} onClick={props.distanceANDpeice.bind(this,1)}>距离最近</p>
                    <p className={props.distanceSort==2?'active':''} onClick={props.distanceANDpeice.bind(this,2)}>价格最低</p>
                </div>
            </div>
        )
    } else {
        return null
    }
}
class StationList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tabState: 0,
            storeList: [],
            oilList: [],
            act_index: 0,
            defaultOil: "",
            distanceSort:1,
            defaultDistance:"",
            productInfoId:"",
            productId:"",
            loadingState:false
        }
    }
    render() {
        return (
          <div className="mapBox">
            <Loading loadingState={this.state.loadingState} />
            <div className="search">
              <div
                className={this.state.tabState == 1 ? "active" : ""}
                onClick={this.selectModule.bind(this, 1)}
              >
                <p>{this.state.defaultOil}</p>
                <img src={this.state.tabState == 1 ? push : pull}></img>
              </div>
              <div
                className={this.state.tabState == 2 ? "active" : ""}
                onClick={this.selectModule.bind(this, 2)}
                style={{ justifyContent: "center" }}
              >
                <p>{this.state.defaultDistance}</p>
                <img src={this.state.tabState == 2 ? push : pull}></img>
              </div>
              {/* <div className={this.state.tabState == 3 ? 'active' : ''} onClick={this.selectModule.bind(this, 3)} style={{ justifyContent: 'flex-end' }}>
                        <img src={this.state.tabState == 3 ? place : place2} className="place"></img>
                        <p>地图模式</p>
                    </div> */}
            </div>
            <Seb2
              tabState={this.state.tabState}
              distanceSort={this.state.distanceSort}
              act_index={this.state.act_index}
              distanceANDpeice={this.distanceANDpeice.bind(this)}
              selectOil={this.selectOil.bind(this)}
              oilList={this.state.oilList}
            />
            <div className="list">
              <React.Fragment>
                {this.state.storeList.map((item, idx) => {
                  return <StationItem key={idx} item={item}></StationItem>;
                })}
              </React.Fragment>
            </div>
          </div>
        );
    }
    selectModule(n) {
        if(this.state.tabState==n){
            this.setState({
                tabState: 0
            })
        }else{
            this.setState({
                tabState: n
            })
        }
    }
    componentDidMount() {
        document.title = "更多站点"
        
        this.productInfoList()
    }
    productInfoList() {
        productInfoList().then(res => {
            console.log(res.data, '油品好列表你')
            this.setState({
                oilList: res.data.result,
                defaultOil:res.data.result[0].name,
                defaultDistance:'距离最近',
                productInfoId:res.data.result[0].id,
                productId:res.data.result[0].productId
            },()=>{
                this.selectListByProductInfoId(this.state.productInfoId ,this.state.productId,'distance')
            })
    
            
        })
    }
    selectOil(e) {
        this.setState({
            act_index: e,
            tabState: 0,
            defaultOil:this.state.oilList[e].name,
            productInfoId:this.state.oilList[e].id,
            productId:this.state.oilList[e].productId
        },()=>{
            this.selectListByProductInfoId(this.state.productInfoId ,this.state.productId,this.state.distanceSort === 1 ? 'distance' : 'price')
        })

        
    }
    distanceANDpeice(e){
        this.setState({
            distanceSort:e,
            tabState:0,
            defaultDistance:e==1?'距离最近':'价格最低'
        },()=>{
            this.selectListByProductInfoId(this.state.productInfoId ,this.state.productId,e==1?'distance':'price')
        })
       
    }
    selectListByProductInfoId(productInfoId,productId,sortFlag){
        this.setState({
            loadingState:true
        })
        let params = JSON.parse(getUrlParam('distanceInfo'))
        let memberId = getUrlParam('memberId')?getUrlParam('memberId'):null
        selectListByProductInfoId({companyId:getUrlParam('companyId') ,lat:params.lat,lot:params.lot,productInfoId,memberId:memberId,productId,sortFlag,cityId: getUrlParam('cityId'),memberCardId:getUrlParam('memberCardId')}).then(res=>{
            if( res.data.result&& res.data.result.length){
                res.data.result.map(item=>{
                    item.cutPrice = item.cutPrice&&divide(item.cutPrice,100)
                    item.plateformPrice = item.plateformPrice&&divide(item.plateformPrice,100)
                })       
            }
                 
            this.setState({
                storeList:res.data.result,
                loadingState:false
            })
        })
    }
}
export default StationList
